:root {
  --primary: #3a6b52;
  --primary-d: #2c5240;
  --primary-dd: #16291f;
  --glow: #5fd3a0;
  --mint: #9beec6;
  --warm: #f08a6b;
  --cream: #f4f2ea;
  --paper: #fbfaf5;
  --ink: #19231d;
  --muted: #5e6e64;
  --disp: "GmarketSansBold", "Jua", "Noto Sans KR", sans-serif;
  --body: "Pretendard", "Noto Sans KR", sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body {
  margin: 0;
  background: var(--cream);
  font-family: var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection {
  background: var(--glow);
  color: var(--primary-dd);
}
@keyframes hmReveal {
  from {
    opacity: 0;
    transform: translateY(42px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hmFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes glowpulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.12);
  }
}
@keyframes ring {
  0% {
    transform: scale(0.55);
    opacity: 0.85;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@keyframes gradientshift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.hm-vis {
  animation: hmReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes sospulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 138, 107, 0.55); }
  70% { box-shadow: 0 0 0 24px rgba(240, 138, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 138, 107, 0); }
}
/* 부모/자녀 체험 모드 스위치 */
.hm-modesw {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(58, 107, 82, 0.08);
  border: 1px solid rgba(58, 107, 82, 0.15);
}
.hm-mode {
  all: unset;
  cursor: pointer;
  font-family: var(--disp);
  font-size: 15px;
  padding: 10px 24px;
  border-radius: 999px;
  color: var(--muted);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.hm-mode:hover { color: var(--primary); }
.hm-mode.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(58, 107, 82, 0.5);
}
/* 헤더를 주요기능·게시판 페이지와 동일한 밝은 cream 글래스로 통일.
   기본은 어두운 글래스 + 라이트 글자라 글자색도 어둡게 함께 변경 (JS 인라인 → !important) */
#hm-nav {
  background: rgba(251, 250, 245, 0.85) !important;
  box-shadow: 0 6px 24px -16px rgba(22, 41, 31, 0.4) !important;
}
#hm-nav > div > div > a {
  color: var(--muted) !important;            /* 소개 · 주요기능 · 게시판 */
}
#hm-nav > div > div > a[style*="--glow"] {
  color: var(--primary) !important;          /* 활성(체험) */
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
  }
}